// 管道 实例


import React, { Component } from 'react';
import './index.css';
import * as THREE from 'three';    //引入three基础相关的所有模块
import { Scene } from 'three';
import Stats from 'three/examples/js/libs/stats.min.js';  //引入状态监测
import TWEEN from "@tweenjs/tween.js";
import * as dat from 'dat.gui';
import Background from '../../assets/image/background.png'
import TrackballControls from 'three-trackballcontrols';
//import { TrackballControls } from './jsm/controls/TrackballControls.js';


 
class Three5 extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
  
    
    initThree = () => {   // 初始化，准备数据  四大组件：场景、相机、渲染器、几何体
      threeStart();

      var scene;
      function initScene() {    // 1、初始化 场景sence
          scene = new THREE.Scene();
          scene.background = new THREE.Color( 0x222222 );
      }

      var camera;
      function initCamera() {   // 2、初始化 相机camera 
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 0, 0, 500 );
      }

      var controls;
      function controls() {   //控制器
        controls = new TrackballControls( camera, renderer.domElement );
				controls.minDistance = 200; 
				controls.maxDistance = 500;
      }


      var renderer,width,height;
      function initRender() {   // 3、初始化 渲染器render
          width = window.innerWidth;
          height = window.innerHeight;
          renderer = new THREE.WebGLRenderer({
              antialias: true   
          });
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize(width, height);   // 设置 渲染器的大小（页面大小）
          document.getElementById('canvas-frame').appendChild(renderer.domElement);  // 将渲染器渲染的内容添加到窗口上（固定写法）
          renderer.setClearColor(0xFFFFFF, 1.0);  // 设置渲染器颜色（清除时）
      }

      var light1,light2;
      function initLight() {  // 初始化 灯光
        light1 = new THREE.AmbientLight( 0x222222 );   // 环境光
        scene.add( light1 ); 

        light2 = new THREE.PointLight( 0xffffff );  // 点光源
				light2.position.copy( camera.position );
				scene.add( light2 );  
      }


      //var mesh,geometry,material;
      function initObject() {   ///4、定义一个几何体，显示在页面上的物体

        const closedSpline = new THREE.CatmullRomCurve3([
					new THREE.Vector3( - 60, - 100, 60 ),
					new THREE.Vector3( - 60, 20, 60 ),
					new THREE.Vector3( - 60, 120, 60 ),
					new THREE.Vector3( 60, 20, - 60 ),
					new THREE.Vector3( 60, - 100, - 60)
				]);

				closedSpline.curveType = 'catmullrom';
				closedSpline.closed = true;

				const extrudeSettings1 = {
					steps: 100,
					bevelEnabled: false,
					extrudePath: closedSpline
				};

				const pts1 = [], count = 3;
				for ( let i = 0; i < count; i ++ ) {
					const l = 20;
					const a = 2 * i / count * Math.PI;
					pts1.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
				}

				const shape1 = new THREE.Shape( pts1 );
				const geometry1 = new THREE.ExtrudeBufferGeometry( shape1, extrudeSettings1 );
				const material1 = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
				const mesh1 = new THREE.Mesh( geometry1, material1 );
        scene.add( mesh1 );
        

        const randomPoints = [];
				for ( let i = 0; i < 10; i ++ ) {
					randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.MathUtils.randFloat( - 50, 50 ), THREE.MathUtils.randFloat( - 50, 50 ) ) );
				}
				const randomSpline = new THREE.CatmullRomCurve3( randomPoints );

				//222222222

				const extrudeSettings2 = {
					steps: 200,
					bevelEnabled: false,
					extrudePath: randomSpline
				};

				const pts2 = [], numPts = 5;
				for ( let i = 0; i < numPts * 2; i ++ ) {
					const l = i % 2 == 1 ? 10 : 20;
					const a = i / numPts * Math.PI;
					pts2.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
				}

				const shape2 = new THREE.Shape( pts2 );
				const geometry2 = new THREE.ExtrudeBufferGeometry( shape2, extrudeSettings2 );
				const material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
				const mesh2 = new THREE.Mesh( geometry2, material2 );
        scene.add( mesh2 );
        
        const materials = [  material2 ];  //material1,

        const extrudeSettings3 = {
					depth: 20,
					steps: 1,
					bevelEnabled: true,
					bevelThickness: 2,
					bevelSize: 4,
					bevelSegments: 1
				};
				const geometry3 = new THREE.ExtrudeBufferGeometry( shape2, extrudeSettings3 );
				const mesh3 = new THREE.Mesh( geometry3, materials );
				mesh3.position.set( 50, 100, 50 );
				scene.add( mesh3 );
      } 




      function animation() {   //  渲染函数
        //controls.update();
        renderer.render(scene, camera);    // 通过场景sence和相机crame一起，用 渲染器 渲染出来
        requestAnimationFrame(animation);  // 当render函数空闲时，不断地调用该函数进行渲染，（可实现渲染效果）
      }
     
    

      function threeStart(){
        initScene();   // 场景
        initCamera();  // 相机
        initRender();  // 渲染器
        initObject();  // 几何体
        initLight(); // 光
        animation();
      
       
      }
  }
 
    /**
     * 开始Three
     *
     * @memberof ThreeBim
     */
    componentDidMount(){
        this.initThree();
    }
    render() {
        return (
          <div id='canvas-frame'></div>
        );
    }
}
 
export default Three5;